<template>
   <nav>
    <ul  class="kerwinactive">
     <i class="iconfont" ></i>
     <li v-for="item in navlist" :key="item.index" class="">{{item.text}}</li>
    </ul>
   </nav>  
</template>
<script>
export default{
    data(){
    return{
        navlist: [
        {
          path: "/film",
          text: "电影",
          icon: "icon-all",
        },
        {
          path: "/cinema",
          text: "影院",
          icon: "icon-category",
        },
        {
          path: "/center",
          text: "我的",
          icon: "icon-account",
        },
      ],
    }
}
}
</script>
<style lang="scss">
.kerwinactive {
  color: red;
}

nav {
  z-index: 10;
  position: fixed;
  left: 0px;
  bottom: 0px;
  width: 100%;
  height: 50px;
  background: white;
  ul {
    display: flex;
    li {
      flex: 1;
      line-height: 25px;
      text-align: center;
      display: flex;
      flex-direction: column;
      span {
        font-size: 10px;
        line-height: 12px;
        word-break: keep-all;
        color: #797d82;
      }
    }
  }
}
</style>